<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./style/index.css">
    <script src="../../lib/vue.js"></script>
</head>
<body>
    <div id="root">
        <div class="todo-container">
            <div class="todo-wrap">
                <!--子传父 父组件向子组件传递函数, 子组件调用 更新内容-->
                <todo-header :add-task-list="addTaskList"></todo-header>
                <!--把父组件的数据 传递给子组件 同时子组件更新时也会传递给父组件-->
                <todo-main :task-list.sync="taskList"></todo-main>
                <todo-footer></todo-footer>
            </div>
        </div>
    </div>
</body>
<script type="module">
    import todoHeader from "./components/todoHeader.js";
    import {todoMain} from "./components/todoMain.js";
    import {todoFooter} from "./components/todoFooter.js";

    new Vue({
        el: "#root",
        data: {
            // [{id:唯一标识，title:任务标题,isChecked:是否被选中}]
            taskList: [],// 任务列表
        },
        methods: {
            // 在任务列表头部添加任务
            addTaskList(e) {
                // 获取标题
                const title = e.target.value.trim();
                // 输入的任务标题的长度是否小于1
                if (title.length < 1) {
                    alert("请输入任务的标题！")
                    return;
                }
                // 判断任务列表中是否已经拥有同名字的任务
                if (this.taskList.some(v => v.title === title)) {
                    alert("该任务的标题已经存在！请不要重复添加！");
                    return;
                }
                // 添加任务
                this.taskList = [
                    {
                        id:Date.now(),
                        title,
                        isChecked:true
                    },
                    ...this.taskList
                ];
                e.target.value = null;
            }
        },
        components: {
            // 头部
            todoHeader,
            // 主体
            todoMain,
            // 底部
            todoFooter
        }
    })
</script>
</html>